<template>
    <van-dialog
        v-model="isShow"
        width="241px"
        :showConfirmButton="false"
        class="submit-success-container"
        :before-close="close"
        :close-on-click-overlay="false"
    >
        <p class="image"></p>
        <p class="title">提交成功！</p>
        <van-button type="primary" @click="close">确定</van-button>
    </van-dialog>
</template>

<script>
import Vue from "vue";
import { Dialog, Button, Toast } from "vant";
Vue.use(Dialog);
Vue.use(Button);
Vue.use(Toast);
export default {
    components: {},
    props: {
        show: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            isShow: false,
        };
    },
    watch: {
        show(val) {
            this.isShow = val;
        },
    },
    created() {},
    mounted() {},
    methods: {
        close() {
            this.$emit("close");
        },
    },
};
</script>

<style lang="less" scoped>
.submit-success-container {
    padding: 20px;
    width: 241px;
    // height: 275px;
    background: #ffffff;
    border-radius: 10px;

    .image {
        width: 100%;
        height: 146px;
        background-image: url("../../assets/img/success.png");
        background-size: 100% 146px;
        background-position: center;
        background-repeat: no-repeat;
    }

    .title {
        font-size: 15px;
        font-weight: 400;
        color: #242728;
        line-height: 21px;
    }

    .van-button {
        margin-top: 25px;
        width: calc(100% - 20px);
        height: 42px;
        background: linear-gradient(180deg, #f34651 0%, #d61c22 100%);
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 21px;
        border: none;
    }
}
</style>
